<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar title="智能停车系统" fixed />
    <!-- 主体部分 -->
    <div class="box">
      <!-- 轮播图 -->
      <div class="swipe">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="item in iconList" :key="item.id"><img :src="item.icon" width="100%" height="100%"></van-swipe-item>
<!--          <van-swipe-item><img src="path/to/image.jpg" width="100%" height="100%"></van-swipe-item>-->
<!--          <van-swipe-item><img src="path/to/image.jpg" width="100%" height="100%"></van-swipe-item>-->
<!--          <van-swipe-item><img src="path/to/image.jpg" width="100%" height="100%"></van-swipe-item>-->
        </van-swipe>
      </div>
      <!-- 导航栏 -->
      <div class="nav">
        <div>1</div>
        <div><img src="../../assets/停车.svg" alt=""></div>
        <div><img src="../../assets/充值 (1).svg" alt=""></div>
        <div><img src="../../assets/查找.svg" alt="" @click="showPrompt"></div>
      </div>
      <!-- 停车场列表 -->
      <div class="parkList"></div>
    </div>
    
    <!-- 导入，注册，并使用 ArticleInfo 组件 -->
    <!-- 在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： -->
    <!-- cmtCount 建议写成 cmt-count -->
    <!-- <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> -->
        <!-- <ArticleInfo
          v-for="item in artlist"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :cmt-count="item.comm_count"
          :time="item.pubdate"
          :cover="item.cover"
        ></ArticleInfo> -->
        <!-- <ParkingList
        v-for="item in parklist"
        :key="item.id"
        :title="item.title"
        :img="item.img"
        ></ParkingList>
      </van-list>
    </van-pull-refresh> -->

    <ParkingLot></ParkingLot>
    <!-- 自定义弹窗 -->
    <van-popup v-model="popupVisible" position="bottom">
      <div style="padding: 20px;">
        <van-field v-model="form.licensePlateNumber" label="停车场名字" placeholder="停车场名字"></van-field>
        <div style="display: flex; justify-content: space-between; margin-top: 20px;">
          <van-button @click="popupVisible = false">取消</van-button>
          <van-button type="primary" @click="submitForm">确定</van-button>
        </div>
      </div>
    </van-popup>
  </div>
  
</template>

<script>
// 按需导入 API 接口
import { getArticleListAPI } from '@/api/articleAPI.js'
import { queryByStatus } from '@/api/rotationChart.js'
// 导入需要的组件
// import ArticleInfo from '@/components/Article/ArticleInfo.vue'
import ParkingList from '../../components/parkingList.vue'
import ParkingLot from '../ParkingLot/ParkingLot.vue'

export default {
  name: 'Home',
  data() {
    return {
      // 页码值
      page: 1,
      iconList: [],
      // 每页显示多少条数据
      limit: 10,
      // 文章的数组
      artlist: [],
      parklist: [{ id: 1, title: '111', img: '111' }, { id: 2, title: '222', img: '222' }],
      // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件
      // 每当下一页数据请求回来之后，千万要记得，把 loading 从 true 改为 false
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      finished: true,
      // 是否正在下拉刷新
      isLoading: false,
      popupVisible: false,
      form: {
        name: ''
      }
    }
  },
  created() {
    // this.initArticleList()
    this.queryByStatus()
  },
  methods: {
    //查询轮播图
    async queryByStatus() {
      const data = await queryByStatus(1)
      console.log("===================================")
      console.log(data.data.data)
      this.iconList = data.data.data
      console.log(data)
    },
    // 封装获取文章列表数据的方法
    async initArticleList(isRefresh) {
      // 发起 GET 请求，获取文章的列表数据
      const { data: res } = await getArticleListAPI(this.page, this.limit)

      if (isRefresh) {
        // 证明是下拉刷新；新数据在前，旧数据在后
        // this.artlist = [新数据在后, 旧数据在前]
        this.artlist = [...res, ...this.artlist]
        this.isLoading = false
      } else {
        // 证明是上拉加载更多；旧数据在前，新数据在后
        // this.artlist = [旧数据在前, 新数据在后]
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }

      if (res.length === 0) {
        // 证明没有下一页数据了，直接把 finished 改为 true，表示数据加载完了！
        this.finished = true
      }
    },
    // 只要 onLoad 被调用，就应该请求下一页数据
    onLoad() {
      console.log('触发了 load 事件！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList()
    },
    // 下拉刷新的处理函数
    onRefresh() {
      console.log('触发了下拉刷新！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList(true)
    },
    showPrompt() {
      this.popupVisible = true
    },
  },
  // 注册组件
  components: {
    // ArticleInfo
    ParkingList,
    ParkingLot
  }
}
</script>

<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
}
.my-swipe{
  height: 200px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: orange;
  }
.box{
  .nav{
    width: 100vw;
    height: 60px;
    display: flex;
    justify-content: space-around;
    // background-color: yellowgreen;
    div{
      width: 20%;
      // border: 1px solid;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        width: 50%;
      }
    }
  }
}
</style>
